<template>
    <div class="author-card">
        <div class="card-header">
            <img :src="author_info.head_image || '/public/yonghu.png'" alt="头像" class="avatar">
            <div class="user-meta">
                <h2 class="username">{{ author_info.username}}</h2>
                <div class="meta-info">
                    <span class="age">{{ author_info.age }}岁</span>
                    <span class="divider">|</span>
                    <span class="sex">{{ author_info.sex }}</span>
                </div>
            </div>
        </div>
        
        <div class="card-body">
            <div class="contact-info">
                <div class="email">
                    <i class="icon icon-email">📧</i>
                    <a :href="'mailto:' + author_info.email" class="email-link">{{ author_info.email }}</a>
                </div>
            </div>
            
            <div class="introduction">
                <h3 class="section-title">个人简介</h3>
                <p class="intro-content">{{ author_info.introduction }}</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps, onMounted, watch, ref } from 'vue';

const props = defineProps({
    author: {
        type: Object,
        required: true,
        default: () => ({
            id: 88888888,
            username: '林芫笙',
            age: 1,
            sex: '保密',
            email: '3052472674@qq.com',
            introduction: '这个人很懒，什么都没有留下',
            head_image: ''
        })
    }
});

let author_info = ref(props.author);

watch(props.author, (newVal) => { 
    author_info.value = newVal;
});

onMounted(() => { 
    author_info.value = props.author; 
});
</script>

<style scoped>
.author-card {
    width:100%;
    height: 500px;
    max-height: 800px;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    transition: all 0.3s ease;
}

.card-header {
    padding: 25px;
    /* background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); */
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
}

.user-meta {
    color: #333;
}

.username {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 5px;
}

.meta-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #666;
}

.divider {
    opacity: 0.5;
}

.card-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.contact-info {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #eee;
}

.email {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #555;
}

.icon-email {
    font-size: 18px;
}

.email-link {
    color: #2c3e50;
    text-decoration: none;
    word-break: break-all;
}

.email-link:hover {
    color: #1a73e8;
    text-decoration: underline;
}

.introduction {
    flex: 1;
}

.section-title {
    font-size: 16px;
    color: #444;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.intro-content {
    color: #666;
    line-height: 1.6;
    margin: 0;
    font-size: 14px;
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
</style>